<template>
    <div class="person">
        <h2> now sum is {{ sum }}</h2>
        <button @click="changeSum">sum+1</button>
    </div>
</template>

<script setup lang="ts" name = 'Person'>
    import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref} from 'vue'
    let sum = ref(0)

    function changeSum(){
        sum.value += 1
    }

    //创建
    console.log('创建');
    
    //挂载
    //前
    onBeforeMount(()=>{
        console.log('挂载前');
    })
    //完毕
    onMounted(()=>{
        console.log('挂载完毕');
        
    })

    //更新
    //前
    onBeforeUpdate(()=>{
        '更新前'
    })
    //完毕
    onUpdated(()=>{
        console.log('更新完毕');
    })

    //卸载
    //前
    onBeforeUnmount(()=>{
        console.log('卸载前');
    })
    //完毕
    onUnmounted(()=>{
        console.log('卸载完毕');
    })
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 10px;
}

li{
    font-size: 20px;
}
</style>